<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useDeleteMallVar, useGetMallVarList, usePublishMallVar } from '@fl/api/man-api'
import { SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'

import AddOrEditAr from './add-or-edit-ar.vue'

const tableRef = ref()

const { createConfirmModal } = useMessage()

const { data: listData, isLoading: listLoading } = useGetMallVarList()

const { isPending: deletePending, mutate: deleteMutate } = useDeleteMallVar()

const { isPending: publishPending, mutate: publishMutate } = usePublishMallVar()

const tableData = computed(() => listData.value || [])

const loading = computed(() => listLoading.value || deletePending.value || publishPending.value)

const visible = ref<boolean>(false)

const id = ref<string>()

const typeEnum = {
    0: '住宅装饰',
    1: '商业商铺',
    2: '高端酒店',
    3: '地下车库',
}

const statusEnum = {
    0: '草稿',
    1: '发布',
}

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'name', title: 'VR名称' },
        { field: 'type', slots: { default: 'type' }, title: '类别' },
        { field: 'url', title: 'VR链接' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
        { field: 'createTime', title: '创建时间' },
        { field: 'publishTime', title: '发布时间' },
        { field: 'createBy', title: '创建人' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [{}],
    rowConfig: {
        keyField: 'id',
    },
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function showReleaseBtn(status: string) {
    return statusEnum?.[status] === '草稿'
}

function priviewRowEvent(row: any) {
    if (row.url) {
        window.open(row.url)
    }
    else {
        ElMessage.warning('暂无链接')
    }
}

function addData() {
    visible.value = true
}

function editRowEvent(row: any) {
    id.value = row.id
    visible.value = true
}

function deleteRowEvent(row: any) {
    createConfirmModal({
        content: '是否确认删除?',
        onError: () => {
            ElMessage.info('取消删除')
        },
        onSuccess: () => {
            deleteMutate(String(row.id), {
                onSuccess: () => {
                    ElMessage.success('操作成功')
                },
            })
        },
    })
}

function releaseRowEvent(row: any) {
    publishMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}
</script>

<template>
    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     :loading="loading"
                     :data="tableData"
        >
            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="addData"
                >
                    新增配置
                </ElButton>
            </template>

            <template #type="{ row }">
                {{ typeEnum?.[row.type] }}
            </template>

            <template #status="{ row }">
                {{ statusEnum?.[row.status] }}
            </template>

            <template #operate="{ row }">
                <ElButton v-if="showReleaseBtn(row.status)"
                          text
                          type="primary"
                          @click="releaseRowEvent(row)"
                >
                    发布
                </ElButton>

                <ElButton text
                          type="primary"
                          @click="priviewRowEvent(row)"
                >
                    预览
                </ElButton>

                <ElButton text
                          type="primary"
                          @click="editRowEvent(row)"
                >
                    编辑
                </ElButton>

                <ElButton text
                          @click="deleteRowEvent(row)"
                >
                    删除
                </ElButton>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEditAr :key="id"
                 v-model:visible="visible"
                 v-model:id="id"
    />
</template>
